<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>v-model演示</title>
    </head>
    <body>
        <div id="app">
            <!-- v-model示例 -->
            <input type="text" name="message" :value="message" @input="message = $event.target.value">
            <input type="text" name="message" v-model="message">
            <h6>{{message}}</h6>
            <textarea name="message" rows="8" cols="80" v-model="message"></textarea>

            <hr>
            <!-- 结合 radio -->
            <!-- 有 v-model 可以不用写 name， 也可以保证单选 -->
            <label for="man">
                <input id="man" type="radio" value="man" v-model="person.sex">
                男
            </label>
            <label for="woman">
                <input id="woman" type="radio" value="woman" v-model="person.sex">
                女
            </label>
            <h2>你选择的性别是
                {{person.sex}}</h2>
            <hr>

            <!-- 结合 checkbox -->
            <!-- 单选框 -->
            <label for="isAgree">
                <input id="isAgree" type="checkbox" value="volleyball" v-model="person.isAgree">
                同意
            </label>
            <button type="button" name="next" :disabled="!person.isAgree">下一步</button>
            <hr>
            <!-- 多选框 -->
            <label for="volleyball">
                <input id="volleyball" type="checkbox" value="volleyball" v-model="person.hobbies">
                排球🏐️
            </label>
            <label for="tennis">
                <input id="tennis" type="checkbox" value="tennis" v-model="person.hobbies">
                网球🎾
            </label>
            <label for="pingpong">
                <input id="pingpong" type="checkbox" value="pingpong" v-model="person.hobbies">
                乒乓球🏓️
            </label>
            <label for="basketball">
                <input id="basketball" type="checkbox" value="basketball" v-model="person.hobbies">
                篮球🏀
            </label>
            <label for="soccer">
                <input id="soccer" type="checkbox" value="soccer" v-model="person.hobbies">
                足球⚽️
            </label>
            <h2>您的爱好是:
                {{hobbies}}</h2>

            <hr>

            <!-- 结合 select -->
            <!-- 单选 -->
            <select v-model="fruit">
                <option value="apple">苹果🍎</option>
                <option value="banana">香蕉🍌</option>
                <option value="pea">梨🍐</option>
                <option value="pineapple">菠萝🍍</option>
            </select>
            <h2>你选择的是
                {{fruit | showFruit}}</h2>

            <!-- 多选 -->
            <select v-model="fruits" multiple>
                <option value="apple">苹果🍎</option>
                <option value="banana">香蕉🍌</option>
                <option value="pea">梨🍐</option>
                <option value="pineapple">菠萝🍍</option>
            </select>
            <h2>你选择的是
                {{fruits | showFruit}}</h2>

            <hr>

            <!-- 修饰符的使用 -->
            <!-- 回车或者丢失焦点才进行更新 message -->
            <input type="text" v-model.lazy="message">
            <h2>{{message}}</h2>

            <input type="number" v-model="person.age">
            <!-- number 修饰符会将输入框中输入的内容自动转换成数字类型 -->
            <input type="text" v-model.number="person.age">
            <!-- 输入时会去除左右空格 -->
            <input type="text" v-model.trim="message">
        </div>
    </body>
    <script src="../js/vue.js" charset="utf-8"></script>
    <script type="text/javascript">
        function showFruit(value) {
            if (value instanceof Array) {
                return value.map(showFruit).join(',');
            } else {
                return document.querySelector("option[value=" + value + "]").innerHTML;
            }
        }
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊',
                fruit: 'apple',
                fruits: [],
                person: {
                    sex: 'man',
                    hobbies: [], // 多选框对应数组值
                    isAgree: false, // 单选框对应boolean值
                    age: 10
                }
            },
            computed: {
                hobbies() {
                    return this.person.hobbies.map(id => document.getElementById(id).nextSibling.nodeValue.trim()).join(',');
                }
            },
            filters: {
                showFruit(value) {
                    return showFruit(value);
                }
            }
        });
    </script>
</html>
